<!DOCTYPE html>












  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">









  
  
    
  
  <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css">




<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">



















  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=6.3.0" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=6.3.0">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=6.3.0">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=6.3.0">


  <link rel="mask-icon" href="/images/logo.svg?v=6.3.0" color="#222">









<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '6.3.0',
    sidebar: {"position":"left","display":"hide","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: false,
    fastclick: false,
    lazyload: false,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>


  




  <meta name="description" content="Echarts文档 Echarts百度开源的一款前端绘图库, ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 安装在博客目录下执行如下命令:1npm install hexo-tag-">
<meta name="keywords" content="hexo,echarts">
<meta property="og:type" content="article">
<meta property="og:title" content="在hexo中画图-ECharts">
<meta property="og:url" content="http://codertang.com/2019/02/21/hexo-drawing-echarts/index.html">
<meta property="og:site_name" content="Tonny&#39;s Blog">
<meta property="og:description" content="Echarts文档 Echarts百度开源的一款前端绘图库, ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 安装在博客目录下执行如下命令:1npm install hexo-tag-">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2021-02-25T09:25:48.209Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="在hexo中画图-ECharts">
<meta name="twitter:description" content="Echarts文档 Echarts百度开源的一款前端绘图库, ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 安装在博客目录下执行如下命令:1npm install hexo-tag-">






  <link rel="canonical" href="http://codertang.com/2019/02/21/hexo-drawing-echarts/">



<script type="text/javascript" id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  <title>在hexo中画图-ECharts | Tonny's Blog</title>
  









  <noscript>
  <style type="text/css">
    .use-motion .motion-element,
    .use-motion .brand,
    .use-motion .menu-item,
    .sidebar-inner,
    .use-motion .post-block,
    .use-motion .pagination,
    .use-motion .comments,
    .use-motion .post-header,
    .use-motion .post-body,
    .use-motion .collection-title { opacity: initial; }

    .use-motion .logo,
    .use-motion .site-title,
    .use-motion .site-subtitle {
      opacity: initial;
      top: initial;
    }

    .use-motion {
      .logo-line-before i { left: initial; }
      .logo-line-after i { right: initial; }
    }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Tonny's Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
      
        <p class="site-subtitle">莫等闲, 白了少年头, 空悲切</p>
      
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-home">
    <a href="/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-tags">
    <a href="/tags/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-categories">
    <a href="/categories/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-th"></i> <br>分类</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-archives">
    <a href="/archives/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>归档</a>
  </li>

      
      
    </ul>
  

  
    

  

  
</nav>



  



</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://codertang.com/2019/02/21/hexo-drawing-echarts/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Tonny Yi">
      <meta itemprop="description" content="Coding, Life, Zen">
      <meta itemprop="image" content="/images/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Tonny's Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">在hexo中画图-ECharts
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">

            
            
            

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              

              
                
              

              <time title="创建时间：2019-02-21 11:47:15" itemprop="dateCreated datePublished" datetime="2019-02-21T11:47:15+08:00">2019-02-21</time>
            

            
              

              
                
                <span class="post-meta-divider">|</span>
                

                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                
                  <span class="post-meta-item-text">更新于</span>
                
                <time title="修改时间：2021-02-25 17:25:48" itemprop="dateModified" datetime="2021-02-25T17:25:48+08:00">2021-02-25</time>
              
            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a></span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body han-init-context" itemprop="articleBody">

      
      

      
        <p><a href="https://echarts.baidu.com/examples/" target="_blank" rel="noopener">Echarts文档</a></p>
<h1 id="Echarts"><a href="#Echarts" class="headerlink" title="Echarts"></a>Echarts</h1><p>百度开源的一款前端绘图库, ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。</p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>在博客目录下执行如下命令:<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-echarts --save</span><br></pre></td></tr></table></figure></p>
<p>该插件依赖的ECharts版本为<code>https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js</code>, 比较老了, 有些新的特性不支持, 需要手动修改ECharts版本, 修改博客目录下的<code>node_modules/hexo-tag-echarts3/template.html</code>文件, 将其中的ECharts引用url改为<code>https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js</code></p>
<h2 id="折线图"><a href="#折线图" class="headerlink" title="折线图"></a>折线图</h2><h3 id="简单的"><a href="#简单的" class="headerlink" title="简单的"></a>简单的</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        data: [&apos;Mon&apos;, &apos;Tue&apos;, &apos;Wed&apos;, &apos;Thu&apos;, &apos;Fri&apos;, &apos;Sat&apos;, &apos;Sun&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">        data: [820, 932, 901, 934, 1290, 1330, 1320],</span><br><span class="line">        type: &apos;line&apos;</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts4000" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts4000'));
        // 指定图表的配置项和数据
        var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="圆滑折线"><a href="#圆滑折线" class="headerlink" title="圆滑折线"></a>圆滑折线</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;&#123;</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        data: [&apos;Mon&apos;, &apos;Tue&apos;, &apos;Wed&apos;, &apos;Thu&apos;, &apos;Fri&apos;, &apos;Sat&apos;, &apos;Sun&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">        data: [820, 932, 901, 934, 1290, 1330, 1320],</span><br><span class="line">        type: &apos;line&apos;,</span><br><span class="line">        smooth: true</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<div id="echarts8387" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts8387'));
        // 指定图表的配置项和数据
        var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="折线图堆叠"><a href="#折线图堆叠" class="headerlink" title="折线图堆叠"></a>折线图堆叠</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;折线图堆叠&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data:[&apos;邮件营销&apos;,&apos;联盟广告&apos;,&apos;视频广告&apos;,&apos;直接访问&apos;,&apos;搜索引擎&apos;],</span><br><span class="line">        top: &apos;10%&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    grid: &#123;</span><br><span class="line">        left: &apos;3%&apos;,</span><br><span class="line">        right: &apos;4%&apos;,</span><br><span class="line">        bottom: &apos;3%&apos;,</span><br><span class="line">        top: &apos;20%&apos;,</span><br><span class="line">        containLabel: true</span><br><span class="line">    &#125;,</span><br><span class="line">    toolbox: &#123;      // 右上角工具条 </span><br><span class="line">        feature: &#123;</span><br><span class="line">            saveAsImage: &#123;&#125;    // 下载图片</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        boundaryGap: false,</span><br><span class="line">        data: [&apos;周一&apos;,&apos;周二&apos;,&apos;周三&apos;,&apos;周四&apos;,&apos;周五&apos;,&apos;周六&apos;,&apos;周日&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;邮件营销&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,      // 数据堆叠，配置相同的stack值后，后值会在前值上相加</span><br><span class="line">            label: &#123;            // 在折线上展示数据</span><br><span class="line">                normal: &#123;       </span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;top&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data:[120, 132, 101, 134, 90, 230, 210]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;联盟广告&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;            // 在折线上展示数据</span><br><span class="line">                emphasis: &#123;     // 鼠标放上去时展示数据</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;top&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data:[220, 182, 191, 234, 290, 330, 310]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;视频广告&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            areaStyle: &#123;normal: &#123;&#125;&#125;,        // 折线下方填色</span><br><span class="line">            data:[150, 232, 201, 154, 190, 330, 410]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;直接访问&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            data:[320, 332, 301, 334, 390, 330, 320]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;搜索引擎&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;top&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            areaStyle: &#123;normal: &#123;&#125;&#125;,</span><br><span class="line">            data:[820, 932, 901, 934, 1290, 1330, 1320]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts1224" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts1224'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
        top: '10%'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '20%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            label: {            
                emphasis: {       
                    show: true,
                    position: 'top'
                }
            },
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="平均值-最高值-最低值"><a href="#平均值-最高值-最低值" class="headerlink" title="平均值, 最高值, 最低值"></a>平均值, 最高值, 最低值</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;未来一周气温变化&apos;,</span><br><span class="line">        subtext: &apos;纯属虚构&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data:[&apos;最高气温&apos;,&apos;最低气温&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    toolbox: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        feature: &#123;</span><br><span class="line">            dataZoom: &#123;</span><br><span class="line">                yAxisIndex: &apos;none&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            dataView: &#123;readOnly: false&#125;,</span><br><span class="line">            magicType: &#123;type: [&apos;line&apos;, &apos;bar&apos;]&#125;,</span><br><span class="line">            restore: &#123;&#125;,</span><br><span class="line">            saveAsImage: &#123;&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis:  &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        boundaryGap: false,</span><br><span class="line">        data: [&apos;周一&apos;,&apos;周二&apos;,&apos;周三&apos;,&apos;周四&apos;,&apos;周五&apos;,&apos;周六&apos;,&apos;周日&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;,</span><br><span class="line">        axisLabel: &#123;</span><br><span class="line">            formatter: &apos;&#123;value&#125; °C&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;最高气温&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            data:[11, 11, 15, 13, 12, 13, 10],</span><br><span class="line">            markPoint: &#123;</span><br><span class="line">                data: [</span><br><span class="line">                    &#123;type: &apos;max&apos;, name: &apos;最大值&apos;&#125;,</span><br><span class="line">                    &#123;type: &apos;min&apos;, name: &apos;最小值&apos;&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            markLine: &#123;</span><br><span class="line">                data: [</span><br><span class="line">                    &#123;type: &apos;average&apos;, name: &apos;平均值&apos;&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;最低气温&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            data:[1, -2, 2, 5, 3, 2, 0],</span><br><span class="line">            markPoint: &#123;</span><br><span class="line">                data: [</span><br><span class="line">                    &#123;name: &apos;周最低&apos;, value: -2, xAxis: 1, yAxis: -1.5&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            markLine: &#123;</span><br><span class="line">                data: [</span><br><span class="line">                    &#123;type: &apos;average&apos;, name: &apos;平均值&apos;&#125;,</span><br><span class="line">                    [&#123;</span><br><span class="line">                        symbol: &apos;none&apos;,</span><br><span class="line">                        x: &apos;90%&apos;,</span><br><span class="line">                        yAxis: &apos;max&apos;</span><br><span class="line">                    &#125;, &#123;</span><br><span class="line">                        symbol: &apos;circle&apos;,</span><br><span class="line">                        label: &#123;</span><br><span class="line">                            normal: &#123;</span><br><span class="line">                                position: &apos;start&apos;,</span><br><span class="line">                                formatter: &apos;最大值&apos;</span><br><span class="line">                            &#125;</span><br><span class="line">                        &#125;,</span><br><span class="line">                        type: &apos;max&apos;,</span><br><span class="line">                        name: &apos;最高点&apos;</span><br><span class="line">                    &#125;]</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts9502" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts9502'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="区域高亮"><a href="#区域高亮" class="headerlink" title="区域高亮"></a>区域高亮</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;一天用电量分布&apos;,</span><br><span class="line">        subtext: &apos;纯属虚构&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            type: &apos;cross&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    toolbox: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        feature: &#123;</span><br><span class="line">            saveAsImage: &#123;&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis:  &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        boundaryGap: false,</span><br><span class="line">        data: [&apos;00:00&apos;, &apos;01:15&apos;, &apos;02:30&apos;, &apos;03:45&apos;, &apos;05:00&apos;, &apos;06:15&apos;, &apos;07:30&apos;, &apos;08:45&apos;, &apos;10:00&apos;, &apos;11:15&apos;, &apos;12:30&apos;, &apos;13:45&apos;, &apos;15:00&apos;, &apos;16:15&apos;, &apos;17:30&apos;, &apos;18:45&apos;, &apos;20:00&apos;, &apos;21:15&apos;, &apos;22:30&apos;, &apos;23:45&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;,</span><br><span class="line">        axisLabel: &#123;</span><br><span class="line">            formatter: &apos;&#123;value&#125; W&apos;</span><br><span class="line">        &#125;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            snap: true</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    visualMap: &#123;</span><br><span class="line">        show: false,</span><br><span class="line">        dimension: 0,</span><br><span class="line">        pieces: [&#123;</span><br><span class="line">            lte: 6,</span><br><span class="line">            color: &apos;green&apos;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            gt: 6,</span><br><span class="line">            lte: 8,</span><br><span class="line">            color: &apos;red&apos;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            gt: 8,</span><br><span class="line">            lte: 14,</span><br><span class="line">            color: &apos;green&apos;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            gt: 14,</span><br><span class="line">            lte: 17,</span><br><span class="line">            color: &apos;red&apos;</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            gt: 17,</span><br><span class="line">            color: &apos;green&apos;</span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;用电量&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            smooth: true,</span><br><span class="line">            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],</span><br><span class="line">            markArea: &#123;</span><br><span class="line">                data: [ [&#123;</span><br><span class="line">                    name: &apos;早高峰&apos;,</span><br><span class="line">                    xAxis: &apos;07:30&apos;</span><br><span class="line">                &#125;, &#123;</span><br><span class="line">                    xAxis: &apos;10:00&apos;</span><br><span class="line">                &#125;], [&#123;</span><br><span class="line">                    name: &apos;晚高峰&apos;,</span><br><span class="line">                    xAxis: &apos;17:30&apos;</span><br><span class="line">                &#125;, &#123;</span><br><span class="line">                    xAxis: &apos;21:15&apos;</span><br><span class="line">                &#125;] ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts8950" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts8950'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '一天用电量分布',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} W'
        },
        axisPointer: {
            snap: true
        }
    },
    visualMap: {
        show: false,
        dimension: 0,
        pieces: [{
            lte: 6,
            color: 'green'
        }, {
            gt: 6,
            lte: 8,
            color: 'red'
        }, {
            gt: 8,
            lte: 14,
            color: 'green'
        }, {
            gt: 14,
            lte: 17,
            color: 'red'
        }, {
            gt: 17,
            color: 'green'
        }]
    },
    series: [
        {
            name:'用电量',
            type:'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
                data: [ [{
                    name: '早高峰',
                    xAxis: '07:30'
                }, {
                    xAxis: '10:00'
                }], [{
                    name: '晚高峰',
                    xAxis: '17:30'
                }, {
                    xAxis: '21:15'
                }] ]
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="柱状图"><a href="#柱状图" class="headerlink" title="柱状图"></a>柱状图</h2><h3 id="简单的-1"><a href="#简单的-1" class="headerlink" title="简单的"></a>简单的</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        data: [&apos;Mon&apos;, &apos;Tue&apos;, &apos;Wed&apos;, &apos;Thu&apos;, &apos;Fri&apos;, &apos;Sat&apos;, &apos;Sun&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">        label: &#123;</span><br><span class="line">            normal: &#123;</span><br><span class="line">                show: true,</span><br><span class="line">                position: &apos;insideTop&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        data: [120, 200, 150, 80, 70, 110, 130],</span><br><span class="line">        type: &apos;bar&apos;</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts6605" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts6605'));
        // 指定图表的配置项和数据
        var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        label: {
            normal: {
                show: true,
                position: 'insideTop'
            }
        },
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="组合柱状图"><a href="#组合柱状图" class="headerlink" title="组合柱状图"></a>组合柱状图</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    tooltip : &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer : &#123;            // 坐标轴指示器，坐标轴触发有效</span><br><span class="line">            type : &apos;shadow&apos;        // 默认为直线，可选为：&apos;line&apos; | &apos;shadow&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data:[&apos;直接访问&apos;,&apos;邮件营销&apos;,&apos;联盟广告&apos;,&apos;视频广告&apos;,&apos;搜索引擎&apos;,&apos;百度&apos;,&apos;谷歌&apos;,&apos;必应&apos;,&apos;其他&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    grid: &#123;</span><br><span class="line">        left: &apos;3%&apos;,</span><br><span class="line">        right: &apos;4%&apos;,</span><br><span class="line">        bottom: &apos;3%&apos;,</span><br><span class="line">        containLabel: true</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis : [</span><br><span class="line">        &#123;</span><br><span class="line">            type : &apos;category&apos;,</span><br><span class="line">            data : [&apos;周一&apos;,&apos;周二&apos;,&apos;周三&apos;,&apos;周四&apos;,&apos;周五&apos;,&apos;周六&apos;,&apos;周日&apos;]</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    yAxis : [</span><br><span class="line">        &#123;</span><br><span class="line">            type : &apos;value&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    series : [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;直接访问&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            data:[320, 332, 301, 334, 390, 330, 320]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;邮件营销&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            stack: &apos;广告&apos;,</span><br><span class="line">            data:[120, 132, 101, 134, 90, 230, 210]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;联盟广告&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            stack: &apos;广告&apos;,</span><br><span class="line">            data:[220, 182, 191, 234, 290, 330, 310]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;视频广告&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            stack: &apos;广告&apos;,</span><br><span class="line">            data:[150, 232, 201, 154, 190, 330, 410]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;搜索引擎&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            data:[862, 1018, 964, 1026, 1679, 1600, 1570],</span><br><span class="line">            markLine : &#123;</span><br><span class="line">                lineStyle: &#123;</span><br><span class="line">                    normal: &#123;</span><br><span class="line">                        type: &apos;dashed&apos;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;,</span><br><span class="line">                data : [</span><br><span class="line">                    [&#123;type : &apos;min&apos;&#125;, &#123;type : &apos;max&apos;&#125;]</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;百度&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            barWidth : 5,</span><br><span class="line">            stack: &apos;搜索引擎&apos;,</span><br><span class="line">            data:[620, 732, 701, 734, 1090, 1130, 1120]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;谷歌&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            stack: &apos;搜索引擎&apos;,</span><br><span class="line">            data:[120, 132, 101, 134, 290, 230, 220]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;必应&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            stack: &apos;搜索引擎&apos;,</span><br><span class="line">            data:[60, 72, 71, 74, 190, 130, 110]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;其他&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            stack: &apos;搜索引擎&apos;,</span><br><span class="line">            data:[62, 82, 91, 84, 109, 110, 120]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts7850" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts7850'));
        // 指定图表的配置项和数据
        var option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    normal: {
                        type: 'dashed'
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            barWidth : 5,
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="横向柱状图"><a href="#横向柱状图" class="headerlink" title="横向柱状图"></a>横向柱状图</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;世界人口总量&apos;,</span><br><span class="line">        subtext: &apos;数据来自网络&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            type: &apos;shadow&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data: [&apos;2011年&apos;, &apos;2012年&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    grid: &#123;</span><br><span class="line">        left: &apos;3%&apos;,</span><br><span class="line">        right: &apos;4%&apos;,</span><br><span class="line">        bottom: &apos;3%&apos;,</span><br><span class="line">        containLabel: true</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;,</span><br><span class="line">        boundaryGap: [0, 0.01]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        data: [&apos;巴西&apos;,&apos;印尼&apos;,&apos;美国&apos;,&apos;印度&apos;,&apos;中国&apos;,&apos;世界人口(万)&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;2011年&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            data: [18203, 23489, 29034, 104970, 131744, 630230]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;2012年&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            data: [19325, 23438, 31000, 121594, 134141, 681807]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts705" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts705'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="柱状横向堆叠"><a href="#柱状横向堆叠" class="headerlink" title="柱状横向堆叠"></a>柱状横向堆叠</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    tooltip : &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer : &#123;            // 坐标轴指示器，坐标轴触发有效</span><br><span class="line">            type : &apos;shadow&apos;        // 默认为直线，可选为：&apos;line&apos; | &apos;shadow&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data: [&apos;直接访问&apos;, &apos;邮件营销&apos;,&apos;联盟广告&apos;,&apos;视频广告&apos;,&apos;搜索引擎&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    grid: &#123;</span><br><span class="line">        left: &apos;3%&apos;,</span><br><span class="line">        right: &apos;4%&apos;,</span><br><span class="line">        bottom: &apos;3%&apos;,</span><br><span class="line">        containLabel: true</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis:  &#123;</span><br><span class="line">        type: &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        data: [&apos;周一&apos;,&apos;周二&apos;,&apos;周三&apos;,&apos;周四&apos;,&apos;周五&apos;,&apos;周六&apos;,&apos;周日&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;直接访问&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;insideRight&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [320, 302, 301, 334, 390, 330, 320]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;邮件营销&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;insideRight&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [120, 132, 101, 134, 90, 230, 210]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;联盟广告&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;insideRight&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [220, 182, 191, 234, 290, 330, 310]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;视频广告&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;insideRight&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [150, 212, 201, 154, 190, 330, 410]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;搜索引擎&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    position: &apos;insideRight&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [820, 832, 901, 934, 1290, 1330, 1320]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts4951" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts4951'));
        // 指定图表的配置项和数据
        var option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="最高值-最低值-标签"><a href="#最高值-最低值-标签" class="headerlink" title="最高值, 最低值, 标签"></a>最高值, 最低值, 标签</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title : &#123;</span><br><span class="line">        text: &apos;某地区蒸发量和降水量&apos;,</span><br><span class="line">        subtext: &apos;纯属虚构&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip : &#123;</span><br><span class="line">        trigger: &apos;axis&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data:[&apos;蒸发量&apos;,&apos;降水量&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    toolbox: &#123;</span><br><span class="line">        show : true,</span><br><span class="line">        feature : &#123;</span><br><span class="line">            dataView : &#123;show: true, readOnly: false&#125;,</span><br><span class="line">            magicType : &#123;show: true, type: [&apos;line&apos;, &apos;bar&apos;]&#125;,</span><br><span class="line">            restore : &#123;show: true&#125;,</span><br><span class="line">            saveAsImage : &#123;show: true&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    calculable : true,</span><br><span class="line">    xAxis : [</span><br><span class="line">        &#123;</span><br><span class="line">            type : &apos;category&apos;,</span><br><span class="line">            data : [&apos;1月&apos;,&apos;2月&apos;,&apos;3月&apos;,&apos;4月&apos;,&apos;5月&apos;,&apos;6月&apos;,&apos;7月&apos;,&apos;8月&apos;,&apos;9月&apos;,&apos;10月&apos;,&apos;11月&apos;,&apos;12月&apos;]</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    yAxis : [</span><br><span class="line">        &#123;</span><br><span class="line">            type : &apos;value&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    series : [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;蒸发量&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],</span><br><span class="line">            markPoint : &#123;</span><br><span class="line">                data : [</span><br><span class="line">                    &#123;type : &apos;max&apos;, name: &apos;最大值&apos;&#125;,</span><br><span class="line">                    &#123;type : &apos;min&apos;, name: &apos;最小值&apos;&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            markLine : &#123;</span><br><span class="line">                data : [</span><br><span class="line">                    &#123;type : &apos;average&apos;, name: &apos;平均值&apos;&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;降水量&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],</span><br><span class="line">            markPoint : &#123;</span><br><span class="line">                data : [</span><br><span class="line">                    &#123;name : &apos;年最高&apos;, value : 182.2, xAxis: 7, yAxis: 183&#125;,</span><br><span class="line">                    &#123;name : &apos;年最低&apos;, value : 2.3, xAxis: 11, yAxis: 3&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            markLine : &#123;</span><br><span class="line">                data : [</span><br><span class="line">                    &#123;type : &apos;average&apos;, name : &apos;平均值&apos;&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts2057" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts2057'));
        // 指定图表的配置项和数据
        var option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="带折线"><a href="#带折线" class="headerlink" title="带折线"></a>带折线</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            type: &apos;cross&apos;,</span><br><span class="line">            crossStyle: &#123;</span><br><span class="line">                color: &apos;#999&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    toolbox: &#123;</span><br><span class="line">        feature: &#123;</span><br><span class="line">            dataView: &#123;show: true, readOnly: false&#125;,</span><br><span class="line">            magicType: &#123;show: true, type: [&apos;line&apos;, &apos;bar&apos;]&#125;,</span><br><span class="line">            restore: &#123;show: true&#125;,</span><br><span class="line">            saveAsImage: &#123;show: true&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data:[&apos;蒸发量&apos;,&apos;降水量&apos;,&apos;平均温度&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis: [</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;category&apos;,</span><br><span class="line">            data: [&apos;1月&apos;,&apos;2月&apos;,&apos;3月&apos;,&apos;4月&apos;,&apos;5月&apos;,&apos;6月&apos;,&apos;7月&apos;,&apos;8月&apos;,&apos;9月&apos;,&apos;10月&apos;,&apos;11月&apos;,&apos;12月&apos;],</span><br><span class="line">            axisPointer: &#123;</span><br><span class="line">                type: &apos;shadow&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    yAxis: [</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;value&apos;,</span><br><span class="line">            name: &apos;水量&apos;,</span><br><span class="line">            min: 0,</span><br><span class="line">            max: 250,</span><br><span class="line">            interval: 50,</span><br><span class="line">            axisLabel: &#123;</span><br><span class="line">                formatter: &apos;&#123;value&#125; ml&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;value&apos;,</span><br><span class="line">            name: &apos;温度&apos;,</span><br><span class="line">            min: 0,</span><br><span class="line">            max: 25,</span><br><span class="line">            interval: 5,</span><br><span class="line">            axisLabel: &#123;</span><br><span class="line">                formatter: &apos;&#123;value&#125; °C&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;蒸发量&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;降水量&apos;,</span><br><span class="line">            type:&apos;bar&apos;,</span><br><span class="line">            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;平均温度&apos;,</span><br><span class="line">            type:&apos;line&apos;,</span><br><span class="line">            yAxisIndex: 1,</span><br><span class="line">            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts3646" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts3646'));
        // 指定图表的配置项和数据
        var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['蒸发量','降水量','平均温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="饼图"><a href="#饼图" class="headerlink" title="饼图"></a>饼图</h2><h3 id="简单饼图"><a href="#简单饼图" class="headerlink" title="简单饼图"></a>简单饼图</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title : &#123;</span><br><span class="line">        text: &apos;某站点用户访问来源&apos;,</span><br><span class="line">        subtext: &apos;纯属虚构&apos;,</span><br><span class="line">        x:&apos;center&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip : &#123;</span><br><span class="line">        trigger: &apos;item&apos;,</span><br><span class="line">        formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        orient: &apos;vertical&apos;,</span><br><span class="line">        left: &apos;left&apos;,</span><br><span class="line">        data: [&apos;直接访问&apos;,&apos;邮件营销&apos;,&apos;联盟广告&apos;,&apos;视频广告&apos;,&apos;搜索引擎&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    series : [</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;访问来源&apos;,</span><br><span class="line">            type: &apos;pie&apos;,</span><br><span class="line">            radius : &apos;55%&apos;,</span><br><span class="line">            center: [&apos;50%&apos;, &apos;60%&apos;],</span><br><span class="line">            data:[</span><br><span class="line">                &#123;value:335, name:&apos;直接访问&apos;&#125;,</span><br><span class="line">                &#123;value:310, name:&apos;邮件营销&apos;&#125;,</span><br><span class="line">                &#123;value:234, name:&apos;联盟广告&apos;&#125;,</span><br><span class="line">                &#123;value:135, name:&apos;视频广告&apos;&#125;,</span><br><span class="line">                &#123;value:1548, name:&apos;搜索引擎&apos;&#125;</span><br><span class="line">            ],</span><br><span class="line">            itemStyle: &#123;</span><br><span class="line">                emphasis: &#123;</span><br><span class="line">                    shadowBlur: 10,</span><br><span class="line">                    shadowOffsetX: 0,</span><br><span class="line">                    shadowColor: &apos;rgba(0, 0, 0, 0.5)&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts8459" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts8459'));
        // 指定图表的配置项和数据
        var option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="自定义饼图"><a href="#自定义饼图" class="headerlink" title="自定义饼图"></a>自定义饼图</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    backgroundColor: &apos;#2c343c&apos;,</span><br><span class="line"></span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;Customized Pie&apos;,</span><br><span class="line">        left: &apos;center&apos;,</span><br><span class="line">        top: 20,</span><br><span class="line">        textStyle: &#123;</span><br><span class="line">            color: &apos;#ccc&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    tooltip : &#123;</span><br><span class="line">        trigger: &apos;item&apos;,</span><br><span class="line">        formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)&quot;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    visualMap: &#123;</span><br><span class="line">        show: false,</span><br><span class="line">        min: 80,</span><br><span class="line">        max: 600,</span><br><span class="line">        inRange: &#123;</span><br><span class="line">            colorLightness: [0, 1]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    series : [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;访问来源&apos;,</span><br><span class="line">            type:&apos;pie&apos;,</span><br><span class="line">            radius : &apos;55%&apos;,</span><br><span class="line">            center: [&apos;50%&apos;, &apos;50%&apos;],</span><br><span class="line">            data:[</span><br><span class="line">                &#123;value:335, name:&apos;直接访问&apos;&#125;,</span><br><span class="line">                &#123;value:310, name:&apos;邮件营销&apos;&#125;,</span><br><span class="line">                &#123;value:274, name:&apos;联盟广告&apos;&#125;,</span><br><span class="line">                &#123;value:235, name:&apos;视频广告&apos;&#125;,</span><br><span class="line">                &#123;value:400, name:&apos;搜索引擎&apos;&#125;</span><br><span class="line">            ].sort(function (a, b) &#123; return a.value - b.value; &#125;),</span><br><span class="line">            roseType: &apos;radius&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    textStyle: &#123;</span><br><span class="line">                        color: &apos;rgba(255, 255, 255, 0.3)&apos;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            labelLine: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    lineStyle: &#123;</span><br><span class="line">                        color: &apos;rgba(255, 255, 255, 0.3)&apos;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    smooth: 0.2,</span><br><span class="line">                    length: 10,</span><br><span class="line">                    length2: 20</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            itemStyle: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    color: &apos;#c23531&apos;,</span><br><span class="line">                    shadowBlur: 200,</span><br><span class="line">                    shadowColor: &apos;rgba(0, 0, 0, 0.5)&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            animationType: &apos;scale&apos;,</span><br><span class="line">            animationEasing: &apos;elasticOut&apos;,</span><br><span class="line">            animationDelay: function (idx) &#123;</span><br><span class="line">                return Math.random() * 200;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts3320" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts3320'));
        // 指定图表的配置项和数据
        var option = {
    backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:274, name:'联盟广告'},
                {value:235, name:'视频广告'},
                {value:400, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="饼图嵌套"><a href="#饼图嵌套" class="headerlink" title="饼图嵌套"></a>饼图嵌套</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;item&apos;,</span><br><span class="line">        formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125;: &#123;c&#125; (&#123;d&#125;%)&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        orient: &apos;vertical&apos;,</span><br><span class="line">        x: &apos;left&apos;,</span><br><span class="line">        data:[&apos;直达&apos;,&apos;营销广告&apos;,&apos;搜索引擎&apos;,&apos;邮件营销&apos;,&apos;联盟广告&apos;,&apos;视频广告&apos;,&apos;百度&apos;,&apos;谷歌&apos;,&apos;必应&apos;,&apos;其他&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;访问来源&apos;,</span><br><span class="line">            type:&apos;pie&apos;,</span><br><span class="line">            selectedMode: &apos;single&apos;,</span><br><span class="line">            radius: [0, &apos;30%&apos;],</span><br><span class="line"></span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    position: &apos;inner&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            labelLine: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: false</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data:[</span><br><span class="line">                &#123;value:335, name:&apos;直达&apos;, selected:true&#125;,</span><br><span class="line">                &#123;value:679, name:&apos;营销广告&apos;&#125;,</span><br><span class="line">                &#123;value:1548, name:&apos;搜索引擎&apos;&#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;访问来源&apos;,</span><br><span class="line">            type:&apos;pie&apos;,</span><br><span class="line">            radius: [&apos;40%&apos;, &apos;55%&apos;],</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    formatter: &apos;&#123;a|&#123;a&#125;&#125;&#123;abg|&#125;\n&#123;hr|&#125;\n  &#123;b|&#123;b&#125;：&#125;&#123;c&#125;  &#123;per|&#123;d&#125;%&#125;  &apos;,</span><br><span class="line">                    backgroundColor: &apos;#eee&apos;,</span><br><span class="line">                    borderColor: &apos;#aaa&apos;,</span><br><span class="line">                    borderWidth: 1,</span><br><span class="line">                    borderRadius: 4,</span><br><span class="line">                    // shadowBlur:3,</span><br><span class="line">                    // shadowOffsetX: 2,</span><br><span class="line">                    // shadowOffsetY: 2,</span><br><span class="line">                    // shadowColor: &apos;#999&apos;,</span><br><span class="line">                    // padding: [0, 7],</span><br><span class="line">                    rich: &#123;</span><br><span class="line">                        a: &#123;</span><br><span class="line">                            color: &apos;#999&apos;,</span><br><span class="line">                            lineHeight: 22,</span><br><span class="line">                            align: &apos;center&apos;</span><br><span class="line">                        &#125;,</span><br><span class="line">                        // abg: &#123;</span><br><span class="line">                        //     backgroundColor: &apos;#333&apos;,</span><br><span class="line">                        //     width: &apos;100%&apos;,</span><br><span class="line">                        //     align: &apos;right&apos;,</span><br><span class="line">                        //     height: 22,</span><br><span class="line">                        //     borderRadius: [4, 4, 0, 0]</span><br><span class="line">                        // &#125;,</span><br><span class="line">                        hr: &#123;</span><br><span class="line">                            borderColor: &apos;#aaa&apos;,</span><br><span class="line">                            width: &apos;100%&apos;,</span><br><span class="line">                            borderWidth: 0.5,</span><br><span class="line">                            height: 0</span><br><span class="line">                        &#125;,</span><br><span class="line">                        b: &#123;</span><br><span class="line">                            fontSize: 16,</span><br><span class="line">                            lineHeight: 33</span><br><span class="line">                        &#125;,</span><br><span class="line">                        per: &#123;</span><br><span class="line">                            color: &apos;#eee&apos;,</span><br><span class="line">                            backgroundColor: &apos;#334455&apos;,</span><br><span class="line">                            padding: [2, 4],</span><br><span class="line">                            borderRadius: 2</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data:[</span><br><span class="line">                &#123;value:335, name:&apos;直达&apos;&#125;,</span><br><span class="line">                &#123;value:310, name:&apos;邮件营销&apos;&#125;,</span><br><span class="line">                &#123;value:234, name:&apos;联盟广告&apos;&#125;,</span><br><span class="line">                &#123;value:135, name:&apos;视频广告&apos;&#125;,</span><br><span class="line">                &#123;value:1048, name:&apos;百度&apos;&#125;,</span><br><span class="line">                &#123;value:251, name:&apos;谷歌&apos;&#125;,</span><br><span class="line">                &#123;value:147, name:&apos;必应&apos;&#125;,</span><br><span class="line">                &#123;value:102, name:&apos;其他&apos;&#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts7403" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts7403'));
        // 指定图表的配置项和数据
        var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直达', selected:true},
                {value:679, name:'营销广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            label: {
                normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                        a: {
                            color: '#999',
                            lineHeight: 22,
                            align: 'center'
                        },
                        // abg: {
                        //     backgroundColor: '#333',
                        //     width: '100%',
                        //     align: 'right',
                        //     height: 22,
                        //     borderRadius: [4, 4, 0, 0]
                        // },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 16,
                            lineHeight: 33
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [2, 4],
                            borderRadius: 2
                        }
                    }
                }
            },
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="散点图"><a href="#散点图" class="headerlink" title="散点图"></a>散点图</h2><h3 id="简单的-2"><a href="#简单的-2" class="headerlink" title="简单的"></a>简单的</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    xAxis: &#123;&#125;,</span><br><span class="line">    yAxis: &#123;&#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">        symbolSize: 20,</span><br><span class="line">        data: [</span><br><span class="line">            [10.0, 8.04],</span><br><span class="line">            [8.0, 6.95],</span><br><span class="line">            [13.0, 7.58],</span><br><span class="line">            [9.0, 8.81],</span><br><span class="line">            [11.0, 8.33],</span><br><span class="line">            [14.0, 9.96],</span><br><span class="line">            [6.0, 7.24],</span><br><span class="line">            [4.0, 4.26],</span><br><span class="line">            [12.0, 10.84],</span><br><span class="line">            [7.0, 4.82],</span><br><span class="line">            [5.0, 5.68]</span><br><span class="line">        ],</span><br><span class="line">        type: &apos;scatter&apos;</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts526" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts526'));
        // 指定图表的配置项和数据
        var option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;Anscombe\&apos;s quartet&apos;,</span><br><span class="line">        x: &apos;0&apos;,</span><br><span class="line">        y: &apos;10&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    grid: [</span><br><span class="line">        &#123;x: &apos;0%&apos;, y: &apos;0%&apos;, width: &apos;380&apos;, height: &apos;380&apos;&#125;</span><br><span class="line">    ],</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        formatter: &apos;Group &#123;a&#125;: (&#123;c&#125;)&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    xAxis: [</span><br><span class="line">        &#123;gridIndex: 0, min: 0, max: 20&#125;</span><br><span class="line">    ],</span><br><span class="line">    yAxis: [</span><br><span class="line">        &#123;gridIndex: 0, min: 0, max: 15&#125;</span><br><span class="line">    ],</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;I&apos;,</span><br><span class="line">            type: &apos;scatter&apos;,</span><br><span class="line">            xAxisIndex: 0,</span><br><span class="line">            yAxisIndex: 0,</span><br><span class="line">            data: [</span><br><span class="line">                [10.0, 8.04],</span><br><span class="line">                [8.0, 6.95],</span><br><span class="line">                [13.0, 7.58],</span><br><span class="line">                [9.0, 8.81],</span><br><span class="line">                [11.0, 8.33],</span><br><span class="line">                [14.0, 9.96],</span><br><span class="line">                [6.0, 7.24],</span><br><span class="line">                [4.0, 4.26],</span><br><span class="line">                [12.0, 10.84],</span><br><span class="line">                [7.0, 4.82],</span><br><span class="line">                [5.0, 5.68]</span><br><span class="line">            ],</span><br><span class="line">            markLine: &#123;</span><br><span class="line">                animation: false,</span><br><span class="line">                label: &#123;</span><br><span class="line">                    normal: &#123;</span><br><span class="line">                        formatter: &apos;y = 0.5 * x + 3&apos;,</span><br><span class="line">                        textStyle: &#123;</span><br><span class="line">                            align: &apos;right&apos;</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;,</span><br><span class="line">                lineStyle: &#123;</span><br><span class="line">                    normal: &#123;</span><br><span class="line">                        type: &apos;solid&apos;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;,</span><br><span class="line">                tooltip: &#123;</span><br><span class="line">                    formatter: &apos;y = 0.5 * x + 3&apos;</span><br><span class="line">                &#125;,</span><br><span class="line">                data: [[&#123;</span><br><span class="line">                    coord: [0, 3],</span><br><span class="line">                    symbol: &apos;none&apos;</span><br><span class="line">                &#125;, &#123;</span><br><span class="line">                    coord: [20, 13],</span><br><span class="line">                    symbol: &apos;none&apos;</span><br><span class="line">                &#125;]]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts9765" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts9765'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: 'Anscombe\'s quartet',
        x: '0',
        y: '10'
    },
    grid: [
        {x: '0%', y: '0%', width: '380', height: '380'}
    ],
    tooltip: {
        formatter: 'Group {a}: ({c})'
    },
    xAxis: [
        {gridIndex: 0, min: 0, max: 20}
    ],
    yAxis: [
        {gridIndex: 0, min: 0, max: 15}
    ],
    series: [
        {
            name: 'I',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
            ],
            markLine: {
                animation: false,
                label: {
                    normal: {
                        formatter: 'y = 0.5 * x + 3',
                        textStyle: {
                            align: 'right'
                        }
                    }
                },
                lineStyle: {
                    normal: {
                        type: 'solid'
                    }
                },
                tooltip: {
                    formatter: 'y = 0.5 * x + 3'
                },
                data: [[{
                    coord: [0, 3],
                    symbol: 'none'
                }, {
                    coord: [20, 13],
                    symbol: 'none'
                }]]
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="雷达图"><a href="#雷达图" class="headerlink" title="雷达图"></a>雷达图</h2><h3 id="基础雷达图"><a href="#基础雷达图" class="headerlink" title="基础雷达图"></a>基础雷达图</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;基础雷达图&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;&#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data: [&apos;预算分配（Allocated Budget）&apos;, &apos;实际开销（Actual Spending）&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    radar: &#123;</span><br><span class="line">        // shape: &apos;circle&apos;,</span><br><span class="line">        name: &#123;</span><br><span class="line">            textStyle: &#123;</span><br><span class="line">                color: &apos;#fff&apos;,</span><br><span class="line">                backgroundColor: &apos;#999&apos;,</span><br><span class="line">                borderRadius: 3,</span><br><span class="line">                padding: [3, 5]</span><br><span class="line">           &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        indicator: [</span><br><span class="line">           &#123; name: &apos;销售（sales）&apos;, max: 6500&#125;,</span><br><span class="line">           &#123; name: &apos;管理（Administration）&apos;, max: 16000&#125;,</span><br><span class="line">           &#123; name: &apos;信息技术（Information Techology）&apos;, max: 30000&#125;,</span><br><span class="line">           &#123; name: &apos;客服（Customer Support）&apos;, max: 38000&#125;,</span><br><span class="line">           &#123; name: &apos;研发（Development）&apos;, max: 52000&#125;,</span><br><span class="line">           &#123; name: &apos;市场（Marketing）&apos;, max: 25000&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">        name: &apos;预算 vs 开销（Budget vs spending）&apos;,</span><br><span class="line">        type: &apos;radar&apos;,</span><br><span class="line">        // areaStyle: &#123;normal: &#123;&#125;&#125;,</span><br><span class="line">        data : [</span><br><span class="line">            &#123;</span><br><span class="line">                value : [4300, 10000, 28000, 35000, 50000, 19000],</span><br><span class="line">                name : &apos;预算分配（Allocated Budget）&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">             &#123;</span><br><span class="line">                value : [5000, 14000, 28000, 31000, 42000, 21000],</span><br><span class="line">                name : &apos;实际开销（Actual Spending）&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts3876" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts3876'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: '销售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '信息技术（Information Techology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研发（Development）', max: 52000},
           { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h3 id="多雷达图"><a href="#多雷达图" class="headerlink" title="多雷达图"></a>多雷达图</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;多雷达图&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        x: &apos;center&apos;,</span><br><span class="line">        data:[&apos;某软件&apos;,&apos;某主食手机&apos;,&apos;某水果手机&apos;,&apos;降水量&apos;,&apos;蒸发量&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    radar: [</span><br><span class="line">        &#123;</span><br><span class="line">            indicator: [</span><br><span class="line">                &#123;text: &apos;品牌&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;内容&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;可用性&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;功能&apos;, max: 100&#125;</span><br><span class="line">            ],</span><br><span class="line">            center: [&apos;25%&apos;,&apos;40%&apos;],</span><br><span class="line">            radius: 80</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            indicator: [</span><br><span class="line">                &#123;text: &apos;外观&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;拍照&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;系统&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;性能&apos;, max: 100&#125;,</span><br><span class="line">                &#123;text: &apos;屏幕&apos;, max: 100&#125;</span><br><span class="line">            ],</span><br><span class="line">            radius: 80,</span><br><span class="line">            center: [&apos;50%&apos;,&apos;60%&apos;],</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            indicator: (function ()&#123;</span><br><span class="line">                var res = [];</span><br><span class="line">                for (var i = 1; i &lt;= 12; i++) &#123;</span><br><span class="line">                    res.push(&#123;text:i+&apos;月&apos;,max:100&#125;);</span><br><span class="line">                &#125;</span><br><span class="line">                return res;</span><br><span class="line">            &#125;)(),</span><br><span class="line">            center: [&apos;75%&apos;,&apos;40%&apos;],</span><br><span class="line">            radius: 80</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;radar&apos;,</span><br><span class="line">             tooltip: &#123;</span><br><span class="line">                trigger: &apos;item&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            itemStyle: &#123;normal: &#123;areaStyle: &#123;type: &apos;default&apos;&#125;&#125;&#125;,</span><br><span class="line">            data: [</span><br><span class="line">                &#123;</span><br><span class="line">                    value: [60,73,85,40],</span><br><span class="line">                    name: &apos;某软件&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;radar&apos;,</span><br><span class="line">            radarIndex: 1,</span><br><span class="line">            data: [</span><br><span class="line">                &#123;</span><br><span class="line">                    value: [85, 90, 90, 95, 95],</span><br><span class="line">                    name: &apos;某主食手机&apos;</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    value: [95, 80, 95, 90, 93],</span><br><span class="line">                    name: &apos;某水果手机&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;radar&apos;,</span><br><span class="line">            radarIndex: 2,</span><br><span class="line">            itemStyle: &#123;normal: &#123;areaStyle: &#123;type: &apos;default&apos;&#125;&#125;&#125;,</span><br><span class="line">            data: [</span><br><span class="line">                &#123;</span><br><span class="line">                    name: &apos;降水量&apos;,</span><br><span class="line">                    value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    name:&apos;蒸发量&apos;,</span><br><span class="line">                    value:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts1540" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts1540'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '多雷达图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'center',
        data:['某软件','某主食手机','某水果手机','降水量','蒸发量']
    },
    radar: [
        {
            indicator: [
                {text: '品牌', max: 100},
                {text: '内容', max: 100},
                {text: '可用性', max: 100},
                {text: '功能', max: 100}
            ],
            center: ['25%','40%'],
            radius: 80
        },
        {
            indicator: [
                {text: '外观', max: 100},
                {text: '拍照', max: 100},
                {text: '系统', max: 100},
                {text: '性能', max: 100},
                {text: '屏幕', max: 100}
            ],
            radius: 80,
            center: ['50%','60%'],
        },
        {
            indicator: (function (){
                var res = [];
                for (var i = 1; i <= 12; i++) {
                    res.push({text:i+'月',max:100});
                }
                return res;
            })(),
            center: ['75%','40%'],
            radius: 80
        }
    ],
    series: [
        {
            type: 'radar',
             tooltip: {
                trigger: 'item'
            },
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [
                {
                    value: [60,73,85,40],
                    name: '某软件'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 1,
            data: [
                {
                    value: [85, 90, 90, 95, 95],
                    name: '某主食手机'
                },
                {
                    value: [95, 80, 95, 90, 93],
                    name: '某水果手机'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 2,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [
                {
                    name: '降水量',
                    value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3],
                },
                {
                    name:'蒸发量',
                    value:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
                }
            ]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="关系图"><a href="#关系图" class="headerlink" title="关系图"></a>关系图</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;笛卡尔坐标系上的 Graph&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;&#125;,</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type : &apos;category&apos;,</span><br><span class="line">        boundaryGap : false,</span><br><span class="line">        data : [&apos;周一&apos;,&apos;周二&apos;,&apos;周三&apos;,&apos;很长很长的周四&apos;,&apos;周五&apos;,&apos;周六&apos;,&apos;周日&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type : &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;graph&apos;,</span><br><span class="line">            layout: &apos;none&apos;,</span><br><span class="line">            coordinateSystem: &apos;cartesian2d&apos;,</span><br><span class="line">            symbolSize: 40,</span><br><span class="line">            label: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    show: true</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            edgeSymbol: [&apos;circle&apos;, &apos;arrow&apos;],</span><br><span class="line">            edgeSymbolSize: [4, 10],</span><br><span class="line">            data: [900, 700, 2000, 1200, 3000, 3500, 4000],</span><br><span class="line">            links: [</span><br><span class="line">                &#123;&quot;source&quot;:0,&quot;target&quot;:1&#125;,</span><br><span class="line">                &#123;&quot;source&quot;:1,&quot;target&quot;:2&#125;,</span><br><span class="line">                &#123;&quot;source&quot;:2,&quot;target&quot;:3&#125;,</span><br><span class="line">                &#123;&quot;source&quot;:3,&quot;target&quot;:4&#125;,</span><br><span class="line">                &#123;&quot;source&quot;:4,&quot;target&quot;:5&#125;,</span><br><span class="line">                &#123;&quot;source&quot;:5,&quot;target&quot;:6&#125;</span><br><span class="line">            ],</span><br><span class="line">            lineStyle: &#123;</span><br><span class="line">                normal: &#123;</span><br><span class="line">                    color: &apos;#2f4554&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts1882" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts1882'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '笛卡尔坐标系上的 Graph'
    },
    tooltip: {},
    xAxis: {
        type : 'category',
        boundaryGap : false,
        data : ['周一','周二','周三','很长很长的周四','周五','周六','周日']
    },
    yAxis: {
        type : 'value'
    },
    series: [
        {
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolSize: 40,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            data: [900, 700, 2000, 1200, 3000, 3500, 4000],
            links: [
                {"source":0,"target":1},
                {"source":1,"target":2},
                {"source":2,"target":3},
                {"source":3,"target":4},
                {"source":4,"target":5},
                {"source":5,"target":6}
            ],
            lineStyle: {
                normal: {
                    color: '#2f4554'
                }
            }
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="矩形树图"><a href="#矩形树图" class="headerlink" title="矩形树图"></a>矩形树图</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    series: [&#123;</span><br><span class="line">        type: &apos;treemap&apos;,</span><br><span class="line">        label: &#123;</span><br><span class="line">            show: true,</span><br><span class="line">            formatter: &quot;&#123;b&#125;&quot;,</span><br><span class="line">            normal: &#123;</span><br><span class="line">                textStyle: &#123;</span><br><span class="line">                    ellipsis: true</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        itemStyle: &#123;</span><br><span class="line">            normal: &#123;</span><br><span class="line">                borderColor: &apos;black&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        levels: [</span><br><span class="line">            &#123;</span><br><span class="line">                itemStyle: &#123;</span><br><span class="line">                    normal: &#123;</span><br><span class="line">                        borderWidth: 3,</span><br><span class="line">                        borderColor: &apos;#333&apos;,</span><br><span class="line">                        gapWidth: 3</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                color: [&apos;#942e38&apos;, &apos;#aaa&apos;, &apos;#269f3c&apos;],</span><br><span class="line">                colorMappingBy: &apos;value&apos;,</span><br><span class="line">                itemStyle: &#123;</span><br><span class="line">                    normal: &#123;</span><br><span class="line">                        gapWidth: 1</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">        data: [&#123;</span><br><span class="line">            name: &apos;nodeA&apos;,            // First tree</span><br><span class="line">            value: 10,</span><br><span class="line">            children: [&#123;</span><br><span class="line">                name: &apos;nodeAa&apos;,       // First leaf of first tree</span><br><span class="line">                value: 4</span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                name: &apos;nodeAb&apos;,       // Second leaf of first tree</span><br><span class="line">                value: 6</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            name: &apos;nodeB&apos;,            // Second tree</span><br><span class="line">            value: 20,</span><br><span class="line">            children: [&#123;</span><br><span class="line">                name: &apos;nodeBa&apos;,       // Son of first tree</span><br><span class="line">                value: 20,</span><br><span class="line">                children: [&#123;</span><br><span class="line">                    name: &apos;nodeBa1&apos;,  // Granson of first tree</span><br><span class="line">                    value: 20</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts9049" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts9049'));
        // 指定图表的配置项和数据
        var option = {
    series: [{
        type: 'treemap',
        label: {
            show: true,
            formatter: "{b}",
            normal: {
                textStyle: {
                    ellipsis: true
                }
            }
        },
        itemStyle: {
            normal: {
                borderColor: 'black'
            }
        },
        levels: [
            {
                itemStyle: {
                    normal: {
                        borderWidth: 3,
                        borderColor: '#333',
                        gapWidth: 3
                    }
                }
            },
            {
                color: ['#942e38', '#aaa', '#269f3c'],
                colorMappingBy: 'value',
                itemStyle: {
                    normal: {
                        gapWidth: 1
                    }
                }
            }
        ],
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 20,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20
                }]
            }]
        }]
    }]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<h2 id="漏斗图"><a href="#漏斗图" class="headerlink" title="漏斗图"></a>漏斗图</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line">&#123;% echarts %&#125;</span><br><span class="line">&#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;漏斗图&apos;,</span><br><span class="line">        subtext: &apos;纯属虚构&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;item&apos;,</span><br><span class="line">        formatter: &quot;&#123;a&#125; &lt;br/&gt;&#123;b&#125; : &#123;c&#125;%&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    toolbox: &#123;</span><br><span class="line">        feature: &#123;</span><br><span class="line">            dataView: &#123;readOnly: false&#125;,</span><br><span class="line">            restore: &#123;&#125;,</span><br><span class="line">            saveAsImage: &#123;&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data: [&apos;展现&apos;,&apos;点击&apos;,&apos;访问&apos;,&apos;咨询&apos;,&apos;订单&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    calculable: true,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name:&apos;漏斗图&apos;,</span><br><span class="line">            type:&apos;funnel&apos;,</span><br><span class="line">            left: &apos;10%&apos;,</span><br><span class="line">            top: 60,</span><br><span class="line">            //x2: 80,</span><br><span class="line">            bottom: 60,</span><br><span class="line">            width: &apos;400&apos;,</span><br><span class="line">            // height: &#123;totalHeight&#125; - y - y2,</span><br><span class="line">            min: 0,</span><br><span class="line">            max: 100,</span><br><span class="line">            minSize: &apos;0%&apos;,</span><br><span class="line">            maxSize: &apos;100%&apos;,</span><br><span class="line">            sort: &apos;descending&apos;,</span><br><span class="line">            gap: 2,</span><br><span class="line">            label: &#123;</span><br><span class="line">                show: true,</span><br><span class="line">                position: &apos;inside&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            labelLine: &#123;</span><br><span class="line">                length: 10,</span><br><span class="line">                lineStyle: &#123;</span><br><span class="line">                    width: 1,</span><br><span class="line">                    type: &apos;solid&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            itemStyle: &#123;</span><br><span class="line">                borderColor: &apos;#fff&apos;,</span><br><span class="line">                borderWidth: 1</span><br><span class="line">            &#125;,</span><br><span class="line">            emphasis: &#123;</span><br><span class="line">                label: &#123;</span><br><span class="line">                    fontSize: 20</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [</span><br><span class="line">                &#123;value: 60, name: &apos;访问&apos;&#125;,</span><br><span class="line">                &#123;value: 40, name: &apos;咨询&apos;&#125;,</span><br><span class="line">                &#123;value: 20, name: &apos;订单&apos;&#125;,</span><br><span class="line">                &#123;value: 80, name: &apos;点击&apos;&#125;,</span><br><span class="line">                &#123;value: 100, name: &apos;展现&apos;&#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line">&#123;% endecharts %&#125;</span><br></pre></td></tr></table></figure>
<div id="echarts656" style="width: 85%;height: 400px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts656'));
        // 指定图表的配置项和数据
        var option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现','点击','访问','咨询','订单']
    },
    calculable: true,
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '400',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
}
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
      
    </div>

    

    
    
    

    

    

    
      <div>
        <ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>Tonny Yi</li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="http://codertang.com/2019/02/21/hexo-drawing-echarts/" title="在hexo中画图-ECharts">http://codertang.com/2019/02/21/hexo-drawing-echarts/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="external nofollow" target="_blank">CC BY-NC 4.0</a> 许可协议。转载请注明出处！</li>
</ul>

      </div>
    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/hexo/" rel="tag"># hexo</a>
          
            <a href="/tags/echarts/" rel="tag"># echarts</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/02/21/hexo-drawing-plantuml/" rel="next" title="在hexo中画图-PlantUml">
                <i class="fa fa-chevron-left"></i> 在hexo中画图-PlantUml
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/02/22/spring-refresh/" rel="prev" title="spring-refresh方法分析">
                spring-refresh方法分析 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.png" alt="Tonny Yi">
            
              <p class="site-author-name" itemprop="name">Tonny Yi</p>
              <p class="site-description motion-element" itemprop="description">Coding, Life, Zen</p>
          </div>

          
            <nav class="site-state motion-element">
              
                <div class="site-state-item site-state-posts">
                
                  <a href="/archives/">
                
                    <span class="site-state-item-count">49</span>
                    <span class="site-state-item-name">日志</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-categories">
                  <a href="/categories/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">42</span>
                    <span class="site-state-item-name">分类</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-tags">
                  <a href="/tags/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">59</span>
                    <span class="site-state-item-name">标签</span>
                  </a>
                </div>
              
            </nav>
          

          

          
            <div class="links-of-author motion-element">
              
                <span class="links-of-author-item">
                  <a href="https://github.com/tonnyyi" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i>GitHub</a>
                  
                </span>
              
                <span class="links-of-author-item">
                  <a href="mailto:tonnyemails@gmail.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  
                </span>
              
            </div>
          

          
          
            <div class="cc-license motion-element" itemprop="license">
              <a href="https://creativecommons.org/licenses/by-nc/4.0/" class="cc-opacity" target="_blank">
                <img src="/images/cc-by-nc.svg" alt="Creative Commons">
              </a>
            </div>
          

          
          

          
            
          
          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Echarts"><span class="nav-number">1.</span> <span class="nav-text">Echarts</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#安装"><span class="nav-number">1.1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#折线图"><span class="nav-number">1.2.</span> <span class="nav-text">折线图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#简单的"><span class="nav-number">1.2.1.</span> <span class="nav-text">简单的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#圆滑折线"><span class="nav-number">1.2.2.</span> <span class="nav-text">圆滑折线</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#折线图堆叠"><span class="nav-number">1.2.3.</span> <span class="nav-text">折线图堆叠</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#平均值-最高值-最低值"><span class="nav-number">1.2.4.</span> <span class="nav-text">平均值, 最高值, 最低值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#区域高亮"><span class="nav-number">1.2.5.</span> <span class="nav-text">区域高亮</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#柱状图"><span class="nav-number">1.3.</span> <span class="nav-text">柱状图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#简单的-1"><span class="nav-number">1.3.1.</span> <span class="nav-text">简单的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组合柱状图"><span class="nav-number">1.3.2.</span> <span class="nav-text">组合柱状图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#横向柱状图"><span class="nav-number">1.3.3.</span> <span class="nav-text">横向柱状图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#柱状横向堆叠"><span class="nav-number">1.3.4.</span> <span class="nav-text">柱状横向堆叠</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#最高值-最低值-标签"><span class="nav-number">1.3.5.</span> <span class="nav-text">最高值, 最低值, 标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#带折线"><span class="nav-number">1.3.6.</span> <span class="nav-text">带折线</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#饼图"><span class="nav-number">1.4.</span> <span class="nav-text">饼图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#简单饼图"><span class="nav-number">1.4.1.</span> <span class="nav-text">简单饼图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义饼图"><span class="nav-number">1.4.2.</span> <span class="nav-text">自定义饼图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#饼图嵌套"><span class="nav-number">1.4.3.</span> <span class="nav-text">饼图嵌套</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#散点图"><span class="nav-number">1.5.</span> <span class="nav-text">散点图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#简单的-2"><span class="nav-number">1.5.1.</span> <span class="nav-text">简单的</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#雷达图"><span class="nav-number">1.6.</span> <span class="nav-text">雷达图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#基础雷达图"><span class="nav-number">1.6.1.</span> <span class="nav-text">基础雷达图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多雷达图"><span class="nav-number">1.6.2.</span> <span class="nav-text">多雷达图</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#关系图"><span class="nav-number">1.7.</span> <span class="nav-text">关系图</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#矩形树图"><span class="nav-number">1.8.</span> <span class="nav-text">矩形树图</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#漏斗图"><span class="nav-number">1.9.</span> <span class="nav-text">漏斗图</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2021</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Tonny Yi</span>

  

  
</div>


  <script src="https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js"></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize("");
    }
  </script>





  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://theme-next.org">NexT.Mist</a></div>




        








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>


























  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=6.3.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=6.3.0"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=6.3.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=6.3.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=6.3.0"></script>



  



	





  





  










  





  

  

  

  

  
  

  

  

  

  

  
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
    }

    .highlight-wrap:hover .copy-btn,
    .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)
        
          if(result)$(this).text('复制成功')
          else $(this).text('复制失败')
        
        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('复制')
        }, 300)
      }).append(e)
    })
  </script>


</body>
</html>
